import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Button } from 'antd'
import { increment, decrement } from './feature/count'
import { getUserInfoAction } from './feature/login'

export default function RTKPage() {
  const { count, userInfo } = useSelector(state => state)
  const dispatch = useDispatch()


  useEffect(() => {
    dispatch(getUserInfoAction())
  }, [])

  console.log('count', count)
  console.log('userInfo', userInfo)

  return (
    <div>
      <h2>count: {count.value}</h2>
      <Button onClick={() => { dispatch(increment()) }}>increame</Button>
      <Button onClick={() => { dispatch(decrement()) }}>decreame</Button>

      <div>
        <p>loading: {userInfo.value.loading ? 'loading' : 'stop'}</p>
        <p>username: {userInfo.value.userInfo?.name || 'null'}</p>
      </div>
    </div>
  )
}
